<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <style>
        .header {
            width: 100%;
            height: 17.55rem;
            float: left;
            background: url(../../../image/login/bg1.png);
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 2.4rem 0.85rem 0 0.85rem;
            position: relative;
        }

        .register {
            float: right;
            height: 4.5rem;
            line-height: 4.5rem;
            text-align: right;
            width: 100%;
            letter-spacing: 0.04rem;
            color: #ffffff;
            font-size: 1.8rem;
        }

        .login_title {
            width: 100%;
            height: 2.8rem;
            font-size: 2.8rem;
            line-height: 2.8rem;
            letter-spacing: 0.06rem;
            color: #ffffff;
            text-align: center;
            position: relative;
            float: left;
        }

        .login_title_shadow {
            width: 100%;
            height: 1.1rem;
            overflow: hidden;
            position: absolute;
            transform: rotateX(120deg);
            color: #fff;
            opacity: 0.41;
            top: 2.4rem;
        }

        .logo {
            float: left;
            width: 7.8rem;
            height: 6.8rem;
            /*background-color: #ffffff;*/
            border-radius: 1.9rem;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -3.6rem;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .content {
            width: 100%;
            float: left;
            margin: 3.7rem 0 0 0;
            box-sizing: border-box;
            padding: 0 3.9rem;
        }

        .content_list {
            width: 100%;
            height: 5.45rem;
            border-bottom: 0.1rem solid #ececec;
            position: relative;
        }

        .content_list_ipt {
            width: 100%!important;
            height: 100%!important;
            font-size: 1.6rem!important;
            padding: 0.9rem 1.5rem 0 3.15rem!important;
            box-sizing: border-box;
            line-height: 8rem;
        }

        .user_icon {
            width: 1.3rem;
            height: 1.5rem;
            position: absolute;
            top: 2.35rem;
        }

        .password_icon {
            width: 1.3rem;
            height: 1.5rem;
            position: absolute;
            top: 2.35rem;
        }

        .look_icon {
            width: 1.2rem;
            height: 0.7rem;
            position: absolute;
            top: 2.8rem;
            right: 0;
        }

        .login_btn {
            width: 100%;
            margin: 1.8rem 0 0 0;
            height: 4.5rem;
            background-image: linear-gradient(90deg, #ff9457 0%, #ffa36f 44%, #ff7878 100%), linear-gradient( #ed6a20, #ed6a20);
            background-blend-mode: normal, normal;
            border-radius: 2.25rem;
            float: left;
            font-size: 1.6rem;
            letter-spacing: 0.03rem;
            color: #ffffff;
            line-height: 4.5rem;
            text-align: center;
        }

        .user_protocol {
            width: 100%;
            text-align: left;
            height: 1.3rem;
            font-size: 1.3rem;
            letter-spacing: 0.03rem;
            color: #5d5d5d;
            line-height: 1.3rem;
            margin: 1.5rem 0 3.75rem 0;
            float: left;
        }

        .user_protocol span {
            color: #659efb;
        }

        .other_line {
            width: 100%;
            height: 0.1rem;
            background-color: #ececec;
            float: left;
            position: relative;
        }

        .other_line_title {
            display: inline-block;
            margin: auto;
            background: #f2f2f2;
            width: 8.5rem;
            left: 0;
            right: 0;
            position: absolute;
            font-size: 1.3rem;
            color: #a3a3a3;
            text-align: center;
            top: -0.9rem;
        }

        .other_login_box {
            width: 100%;
            height: 2.7rem;
            float: left;
            margin: 3.8rem 0 0 0;
            display: flex;
        }

        .other_login_icon {
            height: 100%;
            width: 100%;
        }

        .other_login_icon .wx {
            width: 2.85rem;
            height: 100%;
            margin: auto;
        }

        .other_login_icon .qq {
            width: 2.3rem;
            height: 100%;
            margin: auto;
        }

        .go_back {
            width: 2.05rem;
            height: 1.85rem;
            position: absolute;
            left: 0.85rem;
            top: 3.725rem;
        }

        .content_list .code {
            display: inline-block;
            position: absolute;
            right: 0;
            height: 100%;
            line-height: 6.1rem;
            color: #8e8e8e;
        }

        .aui-toast .aui-toast-content {
            color: #fff
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background-color: #ed6a20;
            border: solid 1px #ed6a20;
            width: 1.2rem;
            height: 1.2rem;
            margin: 0 0.8rem 0 0.35rem;
            border-radius: 50%;
        }

        .rewrite_checkbox {
            color: #c9c9c9;
            width: 1.2rem;
            height: 1.2rem;
            margin: 0 0.8rem 0 0.35rem;
            border-radius: 50%;
        }

        .aui-toast .aui-toast-content {
            color: #fff
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="header">
            <img src="../../../image/login/icon10.png" alt="" @click="go_back" class="go_back">
            <div class="register">
                <!-- 注册 -->
            </div>
            <div class="login_title">
                绑定手机号
                <div class="login_title_shadow">
                    绑定手机号
                </div>
            </div>
            <div class="logo">
                <img src="../../../image/login/icon.png" alt="">
            </div>
        </header>
        <div class="content">
            <div class="content_list">
                <img src="../../../image/login/icon8.png" alt="" class="user_icon">
                <input type="text" name="" value="" class="content_list_ipt" placeholder="请输入手机号" ref="phone">
            </div>
            <div class="content_list">
                <img src="../../../image/login/icon9.png" alt="" class="password_icon">
                <div class="code" @click="get_code" v-if="show?true:false">
                    获取验证码
                </div>
                <div class="code" v-if="show?false:true">
                    重新获取({{count}} s)
                </div>
                <input type="number" name="" value="" class="content_list_ipt" placeholder="请输入验证码" oninput="if(value.length>6)value=value.slice(0,6)" ref="code">
            </div>
            <div class="content_list">
                <img src="../../../image/login/icon4.png" alt="" class="password_icon">
                <img :src="password_type=='password'?'../../../image/login/icon7.png':'../../../image/login/icon2.png'" alt="" class="look_icon" @click="change_look(1)">
                <input :type="password_type" name="" :value="pass" class="content_list_ipt" placeholder="请输入密码" ref="password">
            </div>
            <div class="content_list">
                <img src="../../../image/login/icon4.png" alt="" class="password_icon">
                <img :src="password_r_type=='password'?'../../../image/login/icon7.png':'../../../image/login/icon2.png'" alt="" class="look_icon" @click="change_look(2)">
                <input :type="password_r_type" name="" :value="pass_r" class="content_list_ipt" placeholder="请再次输入密码" ref="password_r">
            </div>
            <div class="login_btn" @click="submit">
                绑定
            </div>
            <div class="user_protocol">
                <label>
                    <input type="checkbox" name="" value="1" checked ref="main" class="aui-checkbox rewrite_checkbox">我已阅读并同意<span>《用户协议》</span>
                </label>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/base64.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    // var parameter = {
    //     type:1,
    //     telephone:"15822686991",
    //     code:"111111",
    //     password:"a111111",
    //     repassword:"a111111",
    //     unionid:"ocQvt0VA481iDEurto4G7mM_d-F0",
    //     imgurl:"http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKKbMRt6Aliaic4TOoKLOHm3TicgToZh1wp1CY4M0rU27lojZLQcMDsaibGqmbTFMTteMtfBzz9U3cGJg/132",
    //     nickname:"freaks",
    // };
    // Axios.post(window.Url.third_register,parameter).then(function(res) {
    //     console.log(JSON.stringify(res))
    //     if (res.status == 1) {
    //         toast.success({
    //             title: res.info,
    //             duration: 1000
    //         });
    //         setTimeout(function() {
    //             that.go_back();
    //         }, 1000);
    //     } else {
    //         toast.fail({
    //             title: res.info,
    //             duration: 1000
    //         });
    //     }
    // });
    apiready = function() {

        //setRefresh()
        // api.parseTapmode();
        var toast = new auiToast({})
        var other = Base64.encode("UNOun0HACHA");
        var vue = new Vue({
            el: "#app",
            data: {
                pass: "",
                pass_r: "",
                password_type: "password",
                password_r_type: "password",
                show: true,
                count: '',
                timer: null,
            },
            mounted: function() {

            },
            methods: {
                //提交
                submit: function() {
                    var data = {}
                    data["phone"] = this.$refs.phone.value
                    data["code"] = this.$refs.code.value
                    data["password"] = this.$refs.password.value
                    data["password_r"] = this.$refs.password_r.value
                    var mian = this.$refs.main
                    if (mian.checked == false) { //确认协议
                        toast.fail({
                            title: "请先同意用户协议",
                            duration: 1000
                        });
                        return false
                    }
                    data = verification(data); //放入验证
                    if (data.code == 0) {
                        toast.fail({
                            title: data.data,
                            duration: 1000
                        });
                        console.log(data);
                    } else if (data.code == 1) {
                        console.log("通过验证");
                        var that = this;
                        var parameter = api.pageParam.data;
                        parameter["telephone"] = data.data["phone"];
                        parameter['code'] = data.data["code"];
                        parameter['password'] = data.data["password"];
                        parameter['repassword'] = data.data["password"];
                        console.log(JSON.stringify(parameter));
                        Axios.post(window.Url.third_register, parameter).then(function(res) {
                            console.log(JSON.stringify(res))
                            if (res.status == 1) {
                                toast.success({
                                    title: res.info,
                                    duration: 1000
                                });
                                setTimeout(function() {
                                    that.go_back();
                                }, 1000);
                            } else {
                                toast.fail({
                                    title: res.info,
                                    duration: 1000
                                });
                            }
                        });
                    }
                },
                //改变可见
                change_look: function(e) {
                    var val = this.$refs.password.value
                    this.pass = val
                    var val_r = this.$refs.password_r.value
                    this.pass_r = val_r
                    if (e == 1) {
                        var password_type = this.password_type
                            // console.log(password_type)
                        password_type == "password" ? password_type = "text" : password_type = "password";
                        this.password_type = password_type
                    } else {
                        var password_r_type = this.password_r_type
                        password_r_type == "password" ? password_r_type = "text" : password_r_type = "password";
                        var val = this.$refs.password_r.value
                        this.password_r_type = password_r_type

                    }
                },
                //获取验证码
                get_code: function(e) {
                    const TIME_COUNT = 60;
                    if (!this.code_time) {
                        var phone = this.$refs.phone.value
                        if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))) {
                            alert("请输入正确手机号")
                            return false;
                        }
                        // var url = "/Base/getMessageCode";  //路径
                        var data = {
                            telephone: phone,
                            codetype: 112,
                            other: other,
                        };
                        var that = this
                        Axios.post(window.Url.getMessageCode, data).then(function(res) {
                            console.log(JSON.stringify(res))
                            if (res.status == 1) {
                                console.log("发送成功");
                                that.count = TIME_COUNT;
                                that.show = false;
                                that.timer = setInterval(() => {
                                    if (that.count > 0 && that.count <= TIME_COUNT) {
                                        that.count--;
                                        var password = that.$refs.password.value
                                        var password_r = that.$refs.password_r.value
                                        that.pass = password
                                        that.pass_r = password_r
                                    } else {
                                        that.show = true;
                                        clearInterval(that.code_time);
                                        that.code_time = null;
                                    }
                                }, 1000)
                            } else {
                                toast.fail({
                                    title: res.info,
                                    duration: 2000
                                });
                            }
                        });
                        var password = this.$refs.password.value
                        var password_r = this.$refs.password_r.value
                        this.pass = password
                        this.pass_r = password_r
                    }
                },
                //返回上级
                go_back: function() {
                    api.closeWin({});
                }
            },
        })
    }

    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }
    //开始验证
    function verification(data) {
        for (let a in data) {
            switch (a) {
                case "phone": //手机号验证
                    let phone = data[a]
                    if (!phone) {
                        let status = {
                            code: 0,
                            data: "账号不能为空"
                        }
                        return status
                    }
                    break;
                case "code": //验证码验证
                    let code = data[a]
                    if (!code) {
                        let status = {
                            code: 0,
                            data: "验证码不能为空"
                        }
                        return status
                    }
                    if (code.length < 6) {
                        let status = {
                            code: 0,
                            data: "请输入6位验证码"
                        }
                        return status
                    }
                    break;
                case "password": //密码验证
                    let password = data[a]
                    if (!password) {
                        let status = {
                            code: 0,
                            data: "密码不能为空"
                        }
                        return status
                    }
                    break;
                case "password_r": //密码再次验证
                    let password_r = data[a]
                    if (!password_r) {
                        let status = {
                            code: 0,
                            data: "二次密码不能为空"
                        }
                        return status
                    }
                    break;
                default:
            }
        }
        if (data["password"] != data["password_r"]) {
            let status = {
                code: 0,
                data: "两次输入密码不一致"
            }
            return status
        }
        let status = {
            code: 1,
            data: data
        }
        return status
    }
    // //二进制转换
    // function total2str(str){
    //     var total2str = "";
    //     for (var i = 0; i < str.length; i++) {
    //           var num10 = str.charCodeAt(i);  ///< 以10进制的整数返回 某个字符 的unicode编码
    //           var str2 = num10.toString(2);   ///< 将10进制数字 转换成 2进制字符串
    //           if( total2str == "" ){
    //             total2str = str2;
    //           }else{
    //             total2str = total2str + "" + str2;
    //           }
    //     }
    //     console.log(total2str)
    //     return total2str
    // }
</script>
